<template>
  <div class="materialsAudit-container">
    <BaseAudit
      :callback-fn="validateForm"
      :submit-data="childSubmitData"
    >
      <template v-slot:extraMiddle>
        <title-name
          v-if="validateIsShow('releatedList') || validateIsShow('importantList') || validateIsShow('signList')"
          title="审批选项"
        />
        <div
          v-if="validateIsShow('releatedList')"
          class="releated-box"
        >
          <span>是否涉及本项目：</span>
          <a-radio-group
            v-model="formInfo.isProject"
            name="radioGroup"
            @change="handleRadioChanged"
          >
            <a-radio :value="0">
              否
            </a-radio>
            <a-radio :value="1">
              是
            </a-radio>
          </a-radio-group>
        </div>
        <div
          v-show="formInfo.isProject === 1"
          class="project-box"
        >
          <span>项目：</span>
          <SelectProject
            ref="selectProject"
            v-model="formInfo.projectId"
            style="width: 200px"
          />
        </div>
        <div
          v-if="validateIsShow('importantList')"
          class="main-box"
        >
          <span>是否重点：</span>
          <a-radio-group
            v-model="formInfo.isImportant"
            name="radioGroup"
          >
            <a-radio :value="0">
              否
            </a-radio>
            <a-radio :value="1">
              是
            </a-radio>
          </a-radio-group>
        </div>
        <div
          v-if="validateIsShow('signList')"
          class="counterSign-box"
        >
          <span>会签人员：</span>
          <a-tag
            v-for="item in formInfo.selectedPersonList"
            :key="item.userId"
            :value="item.userId"
            class="tag"
            color="blue"
            closable
            @close="handleUpdatePerson('del', item)"
          >
            {{ item.name }}
          </a-tag>
          <a-button
            type="primary"
            @click="openPersonList"
          >
            添加
          </a-button>
        </div>
      </template>
    </BaseAudit>
    <person-list
      ref="personList"
      :otherData="{types:[0]}"
      @getPerson="handleGetPerson"
    />
  </div>
</template>

<script>
/*
* 物资审批专用
* */
import Vue from 'vue'
import SelectProject from '@/components/Select/SelectProject.vue'
import BaseAudit from './BaseAudit'

export default {
    components: {
        BaseAudit,
        SelectProject
    },
    data() {
        return {
            formInfo: {
                isProject: '',
                projectId: '',
                isImportant: '',
                selectedPersonList: []
            },
            signList: [
                // 会签标志列表
                'mm_tfrc_pmm_audit',
                'mm_tfrc_fbm_audit',
                'mm_tfrc_chfm_audit',

                'mm_tfr_ppce_audit',
                'mm_tfr_pmm_audit',
                'mm_tfr_fbm_audit',
                'mm_tfr_chfm_audit',

                'mm_cr_ppm_audit',
                'mm_cr_pmm_audit',
                'mm_cr_cfm_audit',
                'mm_cr_fbm_audit',

                'mm_ss_bp_audit'
            ],
            releatedList: ['mm_mcc_sd_audit'], // 涉及标志列表
            importantList: ['mm_purchase_ge_audit'] // 是否重点列表
        }
    },
    // //指派人类型  1 处理人[单个人] 2 候选人[可多选(人员)] 3 候选组[可多选(岗位)]
    // variable.assignVariableType = 2
    // //指派人
    // variable.assignVariableValue = '' //选择的人或岗位的ID，人是userId

    // //业务数据
    // variable.isImportant = 0
    computed: {
        childSubmitData() {
            // 审批时，某些特殊流程需要传递的数据
            const { isProject, projectId, isImportant, selectedPersonList } = this.formInfo
            return {
                assignVariableType: 2,
                isProject,
                projectId,
                isImportant,
                assignVariableValue: selectedPersonList.reduce((pre, cur) => {
                    return pre === '' ? pre + cur.userId : pre + ',' + cur.userId
                }, '')
            }
        }
    },
    methods: {
        handleRadioChanged() {
            try {
                const userInfo = Vue.getAcloudProvider().getUserInfo()
                const branchComIds = ((userInfo.employee && userInfo.employee.levels) || []).map((item) => item.id)
                if (this.formInfo.isProject === 1) {
                    const params = {
                        query: {
                            branchComIds
                        }
                    }
                    this.$refs.selectProject.getProjectList(params)
                }
            } catch {
            }
        },
        handleUpdatePerson(type, data) {
            const index = this.formInfo.selectedPersonList.findIndex((item) => item.userId === data.userId)
            if (type === 'add') {
                index === -1 && this.formInfo.selectedPersonList.push({ ...data })
            } else {
                this.formInfo.selectedPersonList.splice(index, 1)
            }
        },
        validateForm() {
            // 回调验证函数
            const formKeys = []
            if (this.validateIsShow('releatedList')) {
                formKeys.push('isProject')
            }
            if (this.validateIsShow('importantList')) {
                formKeys.push('isImportant')
            }
            if (this.validateIsShow('signList')) {
                formKeys.push('selectedPersonList')
            }
            for (let i = 0; i < formKeys.length; i++) {
                if (
                    this.formInfo[formKeys[i]] === '' ||
                    (this.formInfo[formKeys[i]] instanceof Array && this.formInfo[formKeys[i]].length === 0) ||
                    (formKeys[i] === 'isProject' && this.formInfo.isProject === 1 && this.formInfo.projectId === '')
                ) {
                    this.$message.error('请完成审批选项')
                    return false
                }
            }
            return true
        },
        validateIsShow(type) {
            // 验证对应的审批选项是否显示
            const { taskDefKey } = this.$route.query
            return this[type].includes(taskDefKey)
        },
        openPersonList() {
            this.$refs.personList.open()
        },
        handleGetPerson(data) {
            this.handleUpdatePerson('add', data)
        }
    }
}
</script>

<style lang='less' scoped>
.materialsAudit-container {
    .counterSign-box,
    .main-box,
    .releated-box,
    .project-box {
        display: flex;
        align-items: center;
        padding: 12px 0;

        .tag {
            height: 32px;
            line-height: 32px;
        }
    }
}
</style>